<template>
	<view class="u-wrap">
		<view>
			<image :src="topUrl" style="width: 100%;height: 400upx;"></image>
		</view>
		<view class="flex justify-start">
			<view class="u-tab-view">
				<scroll-view scroll-y scroll-with-animation class=" menu-scroll-view" :scroll-top="scrollTop">
					<view v-for="(category,index) in categoryList" :key="category.hktId" class="u-tab-item"
						:class="[category.hktId==hktId ? 'u-tab-item-active' : '']" :data-current="index"
						@tap.stop="changeHkt(category)">
						<text class="u-line-1">{{category.hktName}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="u-body-view">
				<scroll-view class="" scroll-y="true">
					<view class="page-view">
						<view class="class-item">
							<view class="item-container">
								<view class="thumb-box" v-for="(serv, index1) in servList" :key="index1"
									@tap="toServPage(serv)">
									<image class="item-menu-image c-radius" v-if="serv.coverPhoto"
										:src="serv.coverPhoto" mode=""></image>
									<image class="item-menu-image c-radius" v-else :src="noPic" mode=""></image>
									<view class="item-menu-name text-center margin-top-xs">{{serv.servName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="footer-fixed">
			<view class="footer-main">
				<navigator class="btn-gray" open-type="navigateBack">返回</navigator>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getProduct,
		queryProductCategory
	} from '../../api/goods/goodsApi.js'
	import {
		getUserId,
		getUserName,
		saveUserVisit
	} from '../../api/user/userApi.js';
	import mapping from "@/lib/java110/java110Mapping.js"

	import {
		getShops
	} from '../../api/shop/shopApi.js'
	import conf from '@/conf/config.js';
	import {
		getMallIndexCategoryList
	} from '../../api/index/indexApi.js';
	import {
		getHousekeepingServList,
		getHousekeepingTypeList
	} from "../../api/homemaking/homemakingApi"

	export default {


		data() {
			return {
				loadText: '滚动加载更多...',
				next: true,
				topUrl: conf.commonBaseUrl + 'h5/static/images/homemaking/shop_banner.jpg',
				curPage: 1,
				servList: [],
				//分类列表
				categoryList: [],
				hktId: '',
				noPic: conf.commonBaseUrl + 'h5/static/noPic.png'
			}
		},
		async onLoad(options) {
			await this.vc.onLoad(options).then(_suc => {}, _err => {});
			this.hktId = options.hktId;
			this.initCateList();
		},
		methods: {
			initCateList: function() {
				let _that = this;
				let params = {
					page: 1,
					row: 50,
					isShow: "Y",
					shopId: '9999',
					typeCd: '1001'
				}
				getMallIndexCategoryList(params)
					.then(function(result) {
						let categoryData = result.data
						_that.categoryList = categoryData;
						if(!_that.hktId){
							_that.hktId = categoryData[0].hktId;
						}
						_that._getHousekeepingServList();
					});

			},
			//分类切换显示
			changeHkt(hkt) {
				this.hktId = hkt.hktId;
				this.servList = [];
				this._getHousekeepingServList();
			},
			// 商品详情
			_getHousekeepingServList() {
				let _that = this
				let params = {
					page: 1,
					row: 100,
					hktId: this.hktId,
					// 大类查询，不用传
					shopId: ''
				}
				getHousekeepingServList(params)
					.then(function(result) {
						let servList = result.data;
						_that.servList = servList;
					})
			},
			toServPage: function(serv) {
				uni.setStorageSync(mapping.CACHE_CURRENT_SERV, serv)
				this.vc.navigateTo({
					url: '/pages/homemaking/detail?servId=' + serv.servId + "&shopId=" + serv.shopId
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
		width: 100%;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}
	
	.u-body-view{
		width: calc(100% - 200rpx);
		height: 100%;
	}



	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
		min-height: 800upx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
		display: inline-block;
		white-space: nowrap;
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
</style>